<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <title>江西住建云-项目管理服务平台</title>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <link href="../assets/module/gcjsy/css/public.css" rel="stylesheet">
  <link rel="stylesheet" href="log-on.css">
</head>

<body style="background: rgba(0,32,70,1);height: 100vh">

<div class="signIn center-block margin-top-20">
  <div class="QR-code-tab"></div>
  <ul class="signIn-tab clearfix">
    <li class="active"><span>密码登录</span></li>
    <li><span>短信登录</span></li>
  </ul>
  <div class="signIn-box">
    <div class="password-log-on active">
      <form action="">
        <div class="form-content">
          <div class="form-content-item">
            <p>账号</p>
            <input type="text" class="form-control" placeholder="">
            <span class="help-block red"></span>
          </div>

          <div class="form-content-item">
            <p>登录密码</p>
            <input type="password" class="form-control" placeholder="">
            <span class="help-block red"></span>
          </div>
        </div>
        <div class="signIn-submit">
          <button class="signIn-submit-btn" disabled>登录</button>
          <p class="clearfix">
            <span class="pull-left">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                  <input type="checkbox" checked>
                  <span></span>
                </label>
                <span style="display: inline-block;transform: translateY(-2px)"> 记住账号</span>
            </span>
            <a class="pull-right blue" href="#">忘记密码？</a>
          </p>
        </div>
      </form>
    </div>
    <div class="message-log-on">
      <form action="">
        <div class="form-content">
          <div class="form-content-item">
            <p>手机号</p>
            <input type="text" class="form-control" placeholder="">
            <span class="help-block red"></span>
          </div>

          <div class="form-content-item">
            <p>验证码</p>
            <div class="flex-h" style="justify-content: space-between">
              <input type="password" style="width: 182px" class="form-control" placeholder="">
              <button class="getCaptcha">获取验证码</button>
            </div>

            <span class="help-block red"></span>
          </div>
        </div>
        <div class="signIn-submit">
          <button class="signIn-submit-btn" disabled>登录</button>
          <p class="clearfix">
            <span class="pull-left">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                  <input type="checkbox" checked>
                  <span></span>
                </label>
                <span style="display: inline-block;transform: translateY(-2px)"> 记住账号</span>
            </span>
            <a class="pull-right blue" href="#">忘记密码？</a>
          </p>
        </div>
      </form>
    </div>


  </div>
  <div class="show-QR-code">
      <p>微信/支付宝 扫码登录</p>
    <div class="QR-code-box">

      <img src="../assets/images/erweima.png" alt="">
    </div>
  </div>
</div>

<script>
  $('.QR-code-tab').on('click',function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $('.show-QR-code').removeClass('active')
    }else {
      $(this).addClass('active');
      $('.show-QR-code').addClass('active')
    }
  });

  $('.signIn-tab').children('li').on('click',function () {
    var index = $(this).index() ;
    $(this).addClass('active').siblings().removeClass('active');
    var eml = $('.signIn-box').children('div').eq(index);
    eml.addClass('active').siblings().removeClass('active')
  });

  $('.getCaptcha').on('click',function () {
    var that = $(this);
    that.attr('disabled',true);
    var seconds = 60;
    that.text( seconds + '秒后在点击');
    var timer = setInterval(function () {
      seconds--;
      if (seconds <= 0) {
        clearInterval(timer);
        that.attr('disabled',false);
        that.text('获取验证码');
      } else {
        that.text( seconds + '秒后再点击');
      }
    },1000)
  })
</script>


</body>
</html>
